<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5" title="效果展示">
      <a-button type="primary" class="mt-4 mb-4" @click="openModal"> 打开弹窗 </a-button>

      <!-- 自定义 return-data 方法，用于接收弹窗回调数据 -->
      <ModalRecieveData @register="register" @handle-data="handleData" />
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="使用说明">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { useMessage } from '@/hooks/web/useMessage';

  // 自定义 modal 组件
  import ModalRecieveData from './ModalRecieveData.vue';

  // vben modal 组件
  import { useModal } from '@/components/Modal';

  const { info } = useMessage().createMessage;

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openModal }] = useModal();

  // 自定义打开弹窗方法，打开的同时传递参数
  function handleData(data) {
    info('接收到弹窗数据, id=' + data.id + ', 完整数据:' + JSON.stringify(data));
  }
</script>

<script lang="ts">
  function getDoc() {
    return `

### 通过 emit 回调来实现
* 父组件: 绑定自定义方法，用于接收子组件回调
* 子组件: 自定义 ok 点击方法, 通过 emit 回调父类方法，并传递参数

`;
  }

  function getSource() {
    return `

#### 父组件
\`\`\`html
\<template\>
    <a-button type="primary" class="mt-4 mb-4" @click="openModal" >
      打开弹窗
    </a-button>

    <!-- 自定义 return-data 方法，用于接收弹窗回调数据 -->
    <ModalRecieveData @register="register" @handle-data="handleData" />
\</template\>

\<script lang="ts" setup\>
  // 自定义 modal 组件
  import ModalRecieveData from './ModalRecieveData.vue';

  // vben modal 组件
  import { useModal } from '@/components/Modal';

  const { info } = useMessage().createMessage;

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openModal }] = useModal();

  // 自定义打开弹窗方法，打开的同时传递参数
  function handleData(data) {
    info('接收到弹窗数据, id=' + data.id + ", 完整数据:" + JSON.stringify(data));
  }
\</script\>

### Modal 组件
\`\`\`html
<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    @ok="clickOk"
    title="回调父组件方法"
    :helpMessage="['将用户在本弹窗中操作后的数据，回调给父组件']"
  >
    <!--  绑定数据 -->
    <p> 用户id:<input class="b-1" v-model="user.id" /> </p>
    <p> 用户名:<input class="b-1" v-model="user.name" /> </p>
  </BasicModal>
</template>
\<script lang="ts" setup\>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref } from 'vue';

  // 创建组件
  const [register, { closeModal }] = useModalInner();

  interface User {
    id?: number;
    name?: string;
  }
  let user: User = ref({});

  // 使用 emits，定义可回调的父组件方法
  const emits = defineEmits(['handleData']);

  // 自定义 ok 方法，
  function clickOk() {
    // 回调父组件中的 handleData 方法
    emits('handleData', user.value);
    // ok按钮显示时，需要显示调用弹窗关闭方法
    closeModal();
  }
\</script\>
\`\`\`


\`\`\`

`;
  }
</script>
